<template>
  <div class="info-container">
    <!-- 背景图片 -->
    <img :src="bgImg" class="my-back" />
    <!-- 头像 -->
    <span :title="sysUser.introduce">
      <img :src="sysUser.header" class="my-header" />
    </span>
    <!-- 个人信息 -->
    <div class="bottom-container">
      <div class="nickname">
        {{ sysUser.name }}
      </div>
      <div class="signature">
        {{ sysUser.signature }}
      </div>
      <div class="social-container">
        <div class="social-text">社交：</div>
        <div class="social-item">
          <span :title="msgGitee">
            <img :src="giteeImg" />
          </span>
          <span :title="msg">
            <img :src="qqImg" />
          </span>
        </div>
      </div>
      <!-- <el-divider /> -->
    </div>
  </div>
</template>

<script>
import { getSysUser } from "@/api/user";

export default {
  data() {
    return {
      sysUser: {},
      bgImg: require("@/assets/my-back.jpg"),
      giteeImg: require("@/assets/icons/gitee.png"),
      qqImg: require("@/assets/icons/qq.png"),
      msg: "🐧:1179531613",
      msgGitee: "☹暂未开发",
    };
  },
  created() {
    this.getSysUser();
  },
  methods: {
    // 获取管理员信息
    getSysUser() {
      getSysUser().then((res) => {
        this.sysUser = res.data;
      });
    },
  },
};
</script>

<style src="./user-info.css" scoped>
</style>